<template>
	<view>
		<view :style="[{'height':topHight+'px'}]" style="background: #fff;"></view>
		<view class="topBox">
			<view style="width: 30rpx;"></view>
			<u-icon name="arrow-left" color='#666666' size='20' @click="Goback()"></u-icon>
			<view class="titleNav" v-for="(item,index) in titleList" :key="index"
				:class="{'special' : titleIndex== index}" @click="onclick(index)">
				{{item}}
			</view>
		</view>
		<view v-if="titleIndex == 0" style="padding-bottom: 40rpx;">
			<view class="searchFor" :style="{marginTop: (navigationBarHeight + statusBarHeight) + 'px'}">
				<view class="left" style="background: #F8F8F8;">
					<image src="../../static/homePage/magnifier.jpg" mode=""></image>
					<input type="text" placeholder="搜索院校" v-model="params.schoolName" confirm-type='search'
						@confirm="getlist" />
				</view>
				<image src="https://img.wilmer.com.cn/admin/2024/3-14/WechatIMG272.jpg" mode="" class="right"></image>
			</view>
			<view class="Box" v-for="(item,index) in list" :key="index" @click="onschool(item)">
				<image class="left" :src="item.logo" mode=""></image>
				<view class="right">
					<view class="title">{{item.name}}</view>
					<view class="title_en">{{item.en_name}}</view>
					<view class="address">{{item.city}}</view>
					<view class="label">
						<view class="label_nav" v-for="(nav,i) in item.ranks" :key="i" v-if="nav.brand">
							{{nav.brand}}:{{nav.order}}
						</view>
					</view>
				</view>
			</view>
			<u-loadmore v-if="list.length > 0" :status="status" :loading-text="loadingText"
				:loadmore-text="loadmoreText" :nomore-text="nomoreText" :line='true' />
		</view>
		<view v-else>
			<view class="searchFor" :style="{marginTop: (navigationBarHeight + statusBarHeight) + 'px'}">
				<view class="left">
					<u--input type="text" prefixIcon="search" placeholder="搜索专业" border="surround"
						v-model="ProfessionalVal" clearable @confirm="ProfessionalConfirm()"
						@clear='clearProfessional()' confirmType='search' shape='circle'></u--input>
				</view>
			</view>
			<view class="substance" v-if="ProfessionalList.length == 0"
				style="height: calc(100vh - 88rpx - 100rpx - 54rpx);">
				<scroll-view scroll-x="true" class="kite-classify-scroll1">
					<view class="screen" v-for="(item, index) in knowledgeList" :key="index"
						:class="{'Selected' : knowledgeIndex== index}" @click="onselect(index)">
						{{ item.name }}
					</view>
				</scroll-view>
				<!-- 左右格式: 学科 -->
				<view class="about">
					<view class="about_left">
						<scroll-view scroll-y="true" class="kite-classify-scroll" style="white-space:none">
							<view class="left_nav " v-for="(item,index) in knowledgeList[knowledgeIndex].children"
								:class="{'about_special' : aboutLeftIndex == index}" @click="OnAboutLeft(index)">
								<view class="icon"></view>
								<view class="wenben">{{item.name}}</view>
							</view>
						</scroll-view>
					</view>
					<view class="about_right">
						<scroll-view scroll-y="true" class="kite-classify-scroll" :scroll-into-view="viewid"
							scroll-with-animation>
							<view v-for="(nav,j) in knowledgeList[knowledgeIndex].children" :key="j">
								<view class="right_line right_special" :id="'cont' + j">
									<view class="wenben">{{nav.name}}</view>
								</view>
								<view class="right_line" v-for="(content,i) in nav.children" @click="onPro(content,1)">
									<view class="wenben">{{content.name}}</view>
								</view>
							</view>
						</scroll-view>
					</view>
				</view>
			</view>
			<view class="substance" v-else>
				<view class="substanceNav">
					<view class="line" v-for="(item,index) in ProfessionalList" @click="onPro(item,2)">
						<view class="left">{{item.name}}</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		Getschools,
		getMajor
	} from '@/common/api/homePage.js'
	export default {
		data() {
			return {
				topHight: 0, // 顶部安全距离
				titleList: ['院校库', '专业库'],
				titleIndex: 0,
				list: [], // 院校数据
				total: 0,
				params: {
					pageNum: 1,
					pageSize: 10,
					schoolName: ""
				},
				flag: true, // 上拉加载开关 防止一次触底查询多次问题,防止数据查完后触底还调接口问题
				status: 'loadmore', // loading || loadmore
				loadingText: '努力加载中',
				loadmoreText: '轻轻上拉,加载更多数据',
				nomoreText: '实在没有了',
				knowledgeList: [], // 专业库存
				knowledgeIndex: 0,
				aboutLeftIndex: 0,
				viewid: "", // 锚点
				ProfessionalVal: "", // 模糊查询
				ProfessionalList: []
			}
		},
		onLoad(option) {
			if (option.id) {
				this.titleIndex = option.id
				if (this.titleIndex == 0) {
					this.getlist()
				} else {
					this.getmajorList()
				}
			}
		},
		onShow() {
			let app = uni.getSystemInfoSync()
			this.topHight = app.statusBarHeight
		},
		onReachBottom() {
			let that = this
			if (that.titleIndex == 0) {
				if (that.total > that.list.length) {
					that.status = 'loading'
					if (!this.flag) {
						that.getlist()
						uni.stopPullDownRefresh()
					}
				} else {
					this.status = 'nomore'
				}
			}
		},
		methods: {
			setScrollHeight(){
				let height = 0
			},
			onPro(item, val) {
				let Major = ''
				let TwoMajor = ''
				if (val == 1) {
					Major = this.knowledgeList[this.knowledgeIndex].name
					TwoMajor = this.knowledgeList[this.knowledgeIndex].children[this.aboutLeftIndex].name
				} else {
					Major = item.Major
					TwoMajor = item.TwoMajor
				}
				uni.navigateTo({
					url: `/pages/school/Professional-details?id=${item.id}&Major=${Major}&TwoMajor=${TwoMajor}`
				})
			},
			onschool(item) {
				uni.navigateTo({
					url: `/pages/school/Institution-Details?id=${item.id}`
				})
			},
			getlist() {
				uni.showLoading({
					title: '加载中'
				});
				Getschools(this.params).then(res => {
					setTimeout(() => {
						uni.hideLoading();
					}, 500)
					this.list = res.data.rows
					this.total = res.data.total

					if (res.data.total < 10) {
						this.status = 'nomore'
						this.flag = true
					} else {
						this.status = 'loadmore'
						this.flag = false
						this.params.pageSize = this.params.pageSize + 10
					}
				})
			},
			onclick(index) {
				this.titleIndex = index
				if (this.titleIndex == 1) {
					this.getmajorList()
				} else {
					this.getlist()
				}
			},
			getmajorList() {
				uni.showLoading({
					title: '加载中'
				});
				getMajor().then(res => {
					setTimeout(() => {
						uni.hideLoading();
					}, 500)
					this.knowledgeList = res.data.data
				})
			},
			Goback() {
				uni.navigateBack()
			},
			onselect(index) {
				let that = this
				that.knowledgeIndex = index
				setTimeout(() => {
					that.viewid = "cont" + 0
				}, 300)
			},
			OnAboutLeft(index) {
				this.aboutLeftIndex = index
				this.viewid = "cont" + this.aboutLeftIndex
			},
			// 模糊查询
			ProfessionalConfirm() {
				if (this.ProfessionalVal == '') {
					this.ProfessionalList = []
					return false
				}
				let arr = []
				for (let i = 0; i < this.knowledgeList.length; i++) {
					let item = this.knowledgeList[i]
					if (item.children.length > 1) {
						for (let i = 0; i < item.children.length; i++) {
							let nav = item.children[i]
							if (nav.children.length > 1) {
								for (let n = 0; n < nav.children.length; n++) {
									arr.push({
										name: nav.children[n].name,
										id: nav.children[n].id,
										Major: item.name,
										TwoMajor: nav.name
									})
								}
							}
						}
					}
				}
				// 是在模糊查询功能
				this.ProfessionalList = arr.filter(item => item.name.includes(this.ProfessionalVal))
			},
			clearProfessional() {
				this.ProfessionalList = []
			}
		}
	}
</script>

<style lang="scss">
	page {
		width: 100%;
		height: auto;
		background: #F7F7F8;
		overflow-x: hidden;
	}
</style>

<style lang="scss" scoped>
	.topBox {
		width: 100vw;
		height: 88rpx;
		background-color: #fff;
		display: flex;
		align-items: center;

		.titleNav {
			font-family: PingFang SC;
			font-size: 40rpx;
			font-weight: 400;
			color: #666666;
			margin-left: 36rpx;
		}

		.special {
			color: #333333;
			font-weight: 500;
		}
	}

	.searchFor {
		width: 100vw;
		height: 100rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		background-color: #ffffff;

		.left {
			margin-left: 32rpx;
			width: 588rpx;
			height: 64rpx;
			border-radius: 50rpx;
			display: flex;
			align-items: center;

			image {
				width: 20rpx;
				height: 20rpx;
				margin: 0 24rpx;
			}
		}

		.right {
			width: 44rpx;
			height: 44rpx;
			margin-right: 22rpx;
		}
	}

	.Box {
		width: 100vw;
		height: 288rpx;
		margin-top: 10rpx;
		background: #ffffff;
		display: flex;
		align-items: center;

		.left {
			width: 132rpx;
			height: 132rpx;
			margin-right: 12rpx;
			margin-left: 40rpx;
		}

		.right {
			.title {
				font-family: PingFang SC;
				font-size: 40rpx;
				font-weight: 500;
				color: #000000;
			}

			.title_en {
				margin-top: 8rpx;
				font-family: PingFang SC;
				font-size: 28rpx;
				font-weight: 400;
				color: #666666;
			}

			.address {
				margin-top: 12rpx;
				font-family: PingFang SC;
				font-size: 32rpx;
				font-weight: 400;
				color: #999999;
			}

			.label {
				margin-top: 16rpx;
				display: flex;
				flex-direction: row;
				flex-wrap: wrap;

				.label_nav {
					margin-right: 24rpx;
					padding: 8rpx 20rpx;
					font-family: PingFang SC;
					font-size: 32rpx;
					font-weight: 500;
					color: #333333;
					border-radius: 8rpx;
					background: #EFFFF6;
				}
			}

		}
	}

	.substance {
		margin-top: 20rpx;
		width: 100vw;
		padding-top: 24rpx;
		padding-bottom: 30rpx;
		background-color: #ffffff;

		.kite-classify-scroll1 {
			margin-top: 8px;
			width: calc(100% - 20px);
			overflow: hidden;
			white-space: nowrap;

			.screen {
				padding: 10rpx 18rpx;
				background: #F1F2F6;
				border-radius: 30rpx;
				color: #999999;
				font-family: PingFang SC;
				font-size: 28rpx;
				font-weight: 400;
				display: inline-block;
				margin-left: 32rpx;
			}

			.Selected {
				background: #00D000;
				color: #fff;
			}
		}

		.line {
			margin: 32rpx auto 0;
			width: 688rpx;
			height: 72rpx;
			border-bottom: 1px solid #F8F8F8;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.left {
				margin-left: 28rpx;
				font-family: PingFang SC;
				font-size: 32rpx;
				font-weight: 400;
			}
		}

		.about {
			margin-top: 52rpx;
			display: flex;
			justify-content: space-between;

			.about_left {
				width: 176rpx;
				height: 568px;
				background: #F8F8F8;
				margin-left: 32rpx;
				overflow: hidden;

				.kite-classify-scroll {
					width: 176rpx;
					height: 568px;
				}

				.left_nav {
					display: flex;
					align-items: center;
					justify-content: flex-start;
					padding: 30rpx 0;

					.icon {
						width: 8rpx;
						height: 36rpx;
						border-radius: 0px 4rpx 4rpx 0px;
						background-color: #00D000;
						margin-right: 24rpx;
						opacity: 0;
					}

					.wenben {
						width: 112rpx;
						font-family: PingFang SC;
						font-size: 28rpx;
						font-weight: 400;
						color: #333333;
					}
				}

				.about_special {
					.icon {
						opacity: 1 !important;
					}

					background-color: #fff !important;
				}
			}

			.about_right {
				width: 488rpx;
				height: 568px;
				margin-right: 32rpx;
				overflow: hidden;

				.kite-classify-scroll {
					width: 488rpx;
					height: 568px;
				}

				.right_line {
					width: 488rpx;
					height: 84rpx;
					border-bottom: 1px solid #F7F7F7;
					display: flex;
					align-items: center;

					.wenben {
						font-family: PingFang SC;
						font-size: 28rpx;
						font-weight: 400;
						color: #666666;
						margin-left: 24rpx;
					}
				}

				.right_special {
					background: #F2FFF2;
					border-radius: 12rpx;
					border: none;

					.wenben {
						color: #00D000;
					}
				}
			}

		}
	}
</style>